@use 'sass:math';
@use '../tp';
@use './common/color';

$marker-border-color: rgba(white, 0.75);
$marker-border-color-focus: white;
$track-width: 4px;

.#{tp.$prefix}-colpv {
	&_h,
	&_ap {
		margin-left: math.div(tp.$slider-knob-size, 2);
		margin-right: math.div(tp.$slider-knob-size, 2);
	}
	// Hue
	&_h {
		margin-top: tp.cssVar('container-unit-spacing');
	}
	// RGB text
	&_rgb {
		display: flex;
		margin-top: tp.cssVar('container-unit-spacing');
		width: 100%;
	}
	// Alpha
	&_a {
		display: flex;
		margin-top: tp.cssVar('container-v-padding');
		padding-top: calc(
			#{tp.cssVar('container-v-padding')} + #{tp.$separator-width}
		);
		position: relative;

		// Separator
		&::before {
			background-color: tp.cssVar('groove-fg');
			content: '';
			height: tp.$separator-width;
			left: calc(-1 * #{tp.cssVar('container-h-padding')});
			position: absolute;
			right: calc(-1 * #{tp.cssVar('container-h-padding')});
			top: 0;
		}
	}
	&.#{tp.$disabled} &_a::before {
		opacity: 0.5;
	}
	// Alpha palette
	&_ap {
		align-items: center;
		display: flex;
		flex: 3;
	}
	// Alpha text
	&_at {
		flex: 1;
		margin-left: 4px;
	}
}

// Saturation-value palette
.#{tp.$prefix}-svpv {
	border-radius: tp.cssVar('blade-border-radius');
	outline: none;
	overflow: hidden;
	position: relative;

	&.#{tp.$disabled} {
		opacity: 0.5;
	}

	&_c {
		cursor: crosshair;
		display: block;
		height: calc(tp.cssVar('container-unit-size') * 4);
		width: 100%;
	}
	&_m {
		border-radius: 100%;
		border: $marker-border-color solid 2px;
		box-sizing: border-box;
		filter: drop-shadow(0 0 1px rgba(black, 0.3));
		height: tp.$slider-knob-size;
		margin-left: math.div(-1 * tp.$slider-knob-size, 2);
		margin-top: math.div(-1 * tp.$slider-knob-size, 2);
		pointer-events: none;
		position: absolute;
		width: tp.$slider-knob-size;
	}
	&:focus &_m {
		border-color: $marker-border-color-focus;
	}
}

// Hue palette
.#{tp.$prefix}-hplv {
	cursor: pointer;
	height: tp.cssVar('container-unit-size');
	outline: none;
	position: relative;

	&.#{tp.$disabled} {
		opacity: 0.5;
	}

	&_c {
		background-image: url();
		background-position: left top;
		background-repeat: no-repeat;
		background-size: 100% 100%;
		border-radius: math.div($track-width, 2);
		display: block;
		height: $track-width;
		left: 0;
		margin-top: math.div(-$track-width, 2);
		position: absolute;
		top: 50%;
		width: 100%;
	}
	&_m {
		border-radius: tp.cssVar('blade-border-radius');
		border: $marker-border-color solid 2px;
		box-shadow: 0 0 2px rgba(black, 0.1);
		box-sizing: border-box;
		height: tp.$slider-knob-size;
		left: 50%;
		margin-left: math.div(-1 * tp.$slider-knob-size, 2);
		margin-top: math.div(-1 * tp.$slider-knob-size, 2);
		pointer-events: none;
		position: absolute;
		top: 50%;
		width: tp.$slider-knob-size;
	}
	&:focus &_m {
		border-color: $marker-border-color-focus;
	}
}

// Alpha palette
.#{tp.$prefix}-aplv {
	cursor: pointer;
	height: tp.cssVar('container-unit-size');
	outline: none;
	position: relative;
	width: 100%;

	&.#{tp.$disabled} {
		opacity: 0.5;
	}

	&_b {
		@include color.checkerboard($track-width);

		border-radius: math.div($track-width, 2);
		display: block;
		height: $track-width;
		left: 0;
		margin-top: math.div(-$track-width, 2);
		overflow: hidden;
		position: absolute;
		top: 50%;
		width: 100%;
	}
	&_c {
		inset: 0;
		position: absolute;
	}
	&_m {
		@include color.checkerboard(tp.$slider-knob-size);

		border-radius: tp.cssVar('blade-border-radius');
		box-shadow: 0 0 2px rgba(black, 0.1);
		height: tp.$slider-knob-size;
		left: 50%;
		margin-left: math.div(-1 * tp.$slider-knob-size, 2);
		margin-top: math.div(-1 * tp.$slider-knob-size, 2);
		overflow: hidden;
		pointer-events: none;
		position: absolute;
		top: 50%;
		width: tp.$slider-knob-size;
	}
	&_p {
		border-radius: tp.cssVar('blade-border-radius');
		border: $marker-border-color solid 2px;
		box-sizing: border-box;
		inset: 0;
		position: absolute;
	}
	&:focus &_p {
		border-color: $marker-border-color-focus;
	}
}
